<template>
  <div class="store-settings">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">⚙️ 门店设置</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleSave">
              <el-icon><Select /></el-icon>
              保存设置
            </el-button>
          </div>
        </div>
      </template>

      <!-- 门店选择 -->
      <el-form :inline="true" class="store-selector">
        <el-form-item label="选择门店">
          <el-select v-model="selectedStoreId" placeholder="请选择门店" @change="handleStoreChange">
            <el-option label="深圳旗舰店" value="1" />
            <el-option label="上海陆家嘴店" value="2" />
            <el-option label="北京国贸店" value="3" />
            <el-option label="广州天河店" value="4" />
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 设置Tab页 -->
      <el-tabs v-model="activeTab">
        <!-- 基础设置 -->
        <el-tab-pane label="基础设置" name="basic">
          <el-form :model="basicSettings" label-width="120px" style="max-width: 800px;">
            <el-form-item label="门店名称">
              <el-input v-model="basicSettings.name" placeholder="请输入门店名称" />
            </el-form-item>

            <el-form-item label="门店编码">
              <el-input v-model="basicSettings.code" placeholder="请输入门店编码" />
            </el-form-item>

            <el-form-item label="营业时间">
              <el-time-picker
                v-model="basicSettings.openTime"
                placeholder="开始时间"
                value-format="HH:mm"
                style="width: 150px; margin-right: 10px;"
              />
              <span style="margin: 0 5px;">至</span>
              <el-time-picker
                v-model="basicSettings.closeTime"
                placeholder="结束时间"
                value-format="HH:mm"
                style="width: 150px;"
              />
            </el-form-item>

            <el-form-item label="休息日">
              <el-checkbox-group v-model="basicSettings.restDays">
                <el-checkbox label="周一" value="1" />
                <el-checkbox label="周二" value="2" />
                <el-checkbox label="周三" value="3" />
                <el-checkbox label="周四" value="4" />
                <el-checkbox label="周五" value="5" />
                <el-checkbox label="周六" value="6" />
                <el-checkbox label="周日" value="0" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="联系电话">
              <el-input v-model="basicSettings.phone" placeholder="请输入联系电话" />
            </el-form-item>

            <el-form-item label="门店地址">
              <el-input v-model="basicSettings.address" placeholder="请输入门店地址" />
            </el-form-item>

            <el-form-item label="门店简介">
              <el-input
                v-model="basicSettings.description"
                type="textarea"
                :rows="4"
                placeholder="请输入门店简介"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 库存设置 -->
        <el-tab-pane label="库存设置" name="inventory">
          <el-form :model="inventorySettings" label-width="140px" style="max-width: 800px;">
            <el-form-item label="库存预警开关">
              <el-switch v-model="inventorySettings.warningEnabled" />
            </el-form-item>

            <el-form-item label="预警阈值比例">
              <el-slider 
                v-model="inventorySettings.warningRatio" 
                :min="10" 
                :max="100"
                show-input
                :disabled="!inventorySettings.warningEnabled"
              />
              <span style="color: #909399; font-size: 12px;">
                当库存低于安全库存的 {{ inventorySettings.warningRatio }}% 时发出预警
              </span>
            </el-form-item>

            <el-form-item label="自动补货">
              <el-switch v-model="inventorySettings.autoReplenish" />
            </el-form-item>

            <el-form-item label="补货触发条件" v-if="inventorySettings.autoReplenish">
              <el-radio-group v-model="inventorySettings.replenishCondition">
                <el-radio label="warning">达到预警阈值</el-radio>
                <el-radio label="zero">库存为零</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="库存盘点周期">
              <el-select v-model="inventorySettings.checkCycle" style="width: 200px;">
                <el-option label="每日" value="daily" />
                <el-option label="每周" value="weekly" />
                <el-option label="每月" value="monthly" />
                <el-option label="每季度" value="quarterly" />
              </el-select>
            </el-form-item>

            <el-form-item label="允许负库存">
              <el-switch v-model="inventorySettings.allowNegative" />
              <span style="color: #909399; font-size: 12px; margin-left: 10px;">
                开启后允许库存为负数（用于预售场景）
              </span>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 销售设置 -->
        <el-tab-pane label="销售设置" name="sales">
          <el-form :model="salesSettings" label-width="140px" style="max-width: 800px;">
            <el-form-item label="支持支付方式">
              <el-checkbox-group v-model="salesSettings.paymentMethods">
                <el-checkbox label="现金" value="cash" />
                <el-checkbox label="银行卡" value="card" />
                <el-checkbox label="微信支付" value="wechat" />
                <el-checkbox label="支付宝" value="alipay" />
                <el-checkbox label="会员卡" value="member" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="允许退换货">
              <el-switch v-model="salesSettings.allowReturn" />
            </el-form-item>

            <el-form-item label="退换货期限" v-if="salesSettings.allowReturn">
              <el-input-number v-model="salesSettings.returnDays" :min="1" :max="90" />
              <span style="margin-left: 5px;">天</span>
            </el-form-item>

            <el-form-item label="会员折扣">
              <el-switch v-model="salesSettings.memberDiscount" />
            </el-form-item>

            <el-form-item label="积分规则" v-if="salesSettings.memberDiscount">
              <span>消费 </span>
              <el-input-number v-model="salesSettings.pointsRatio" :min="1" :max="100" style="width: 100px; margin: 0 5px;" />
              <span> 元 = </span>
              <el-input-number v-model="salesSettings.pointsValue" :min="1" :max="100" style="width: 100px; margin: 0 5px;" />
              <span> 积分</span>
            </el-form-item>

            <el-form-item label="小票打印">
              <el-switch v-model="salesSettings.printReceipt" />
            </el-form-item>

            <el-form-item label="打印份数" v-if="salesSettings.printReceipt">
              <el-radio-group v-model="salesSettings.printCopies">
                <el-radio :label="1">1份</el-radio>
                <el-radio :label="2">2份</el-radio>
                <el-radio :label="3">3份</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 权限设置 -->
        <el-tab-pane label="权限设置" name="permission">
          <el-form :model="permissionSettings" label-width="140px" style="max-width: 800px;">
            <el-form-item label="商品折扣权限">
              <el-select v-model="permissionSettings.discountAuth" style="width: 200px;">
                <el-option label="店长审批" value="manager" />
                <el-option label="区域经理审批" value="regional" />
                <el-option label="总部审批" value="headquarters" />
              </el-select>
            </el-form-item>

            <el-form-item label="最大折扣比例">
              <el-slider 
                v-model="permissionSettings.maxDiscount" 
                :min="50" 
                :max="100"
                show-input
              />
              <span style="color: #909399; font-size: 12px;">
                员工最多可以打 {{ permissionSettings.maxDiscount / 10 }} 折
              </span>
            </el-form-item>

            <el-form-item label="退货权限">
              <el-select v-model="permissionSettings.returnAuth" style="width: 200px;">
                <el-option label="店长审批" value="manager" />
                <el-option label="财务审批" value="finance" />
                <el-option label="总部审批" value="headquarters" />
              </el-select>
            </el-form-item>

            <el-form-item label="调拨权限">
              <el-select v-model="permissionSettings.transferAuth" style="width: 200px;">
                <el-option label="店长审批" value="manager" />
                <el-option label="仓库主管审批" value="warehouse" />
                <el-option label="区域经理审批" value="regional" />
              </el-select>
            </el-form-item>

            <el-form-item label="报表查看权限">
              <el-checkbox-group v-model="permissionSettings.reportAuth">
                <el-checkbox label="销售报表" value="sales" />
                <el-checkbox label="库存报表" value="inventory" />
                <el-checkbox label="财务报表" value="finance" />
                <el-checkbox label="员工报表" value="staff" />
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 通知设置 -->
        <el-tab-pane label="通知设置" name="notification">
          <el-form :model="notificationSettings" label-width="140px" style="max-width: 800px;">
            <el-form-item label="库存预警通知">
              <el-switch v-model="notificationSettings.stockWarning" />
            </el-form-item>

            <el-form-item label="通知方式" v-if="notificationSettings.stockWarning">
              <el-checkbox-group v-model="notificationSettings.warningMethods">
                <el-checkbox label="短信" value="sms" />
                <el-checkbox label="邮件" value="email" />
                <el-checkbox label="系统消息" value="system" />
                <el-checkbox label="微信" value="wechat" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="销售日报">
              <el-switch v-model="notificationSettings.dailyReport" />
            </el-form-item>

            <el-form-item label="发送时间" v-if="notificationSettings.dailyReport">
              <el-time-picker
                v-model="notificationSettings.reportTime"
                placeholder="选择时间"
                value-format="HH:mm"
                style="width: 150px;"
              />
            </el-form-item>

            <el-form-item label="接收人员">
              <el-select v-model="notificationSettings.receivers" multiple placeholder="请选择接收人员" style="width: 100%;">
                <el-option label="店长" value="manager" />
                <el-option label="区域经理" value="regional" />
                <el-option label="财务" value="finance" />
                <el-option label="总部" value="headquarters" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Select } from '@element-plus/icons-vue'

// 选中的门店
const selectedStoreId = ref('1')

// 当前激活的Tab
const activeTab = ref('basic')

// 基础设置
const basicSettings = reactive({
  name: '深圳旗舰店',
  code: 'SZ001',
  openTime: '09:00',
  closeTime: '21:00',
  restDays: [],
  phone: '0755-12345678',
  address: '深圳市南山区科技园南区深南大道9988号',
  description: '深圳旗舰店是公司最大的门店之一，位于深圳核心商圈。'
})

// 库存设置
const inventorySettings = reactive({
  warningEnabled: true,
  warningRatio: 50,
  autoReplenish: true,
  replenishCondition: 'warning',
  checkCycle: 'weekly',
  allowNegative: false
})

// 销售设置
const salesSettings = reactive({
  paymentMethods: ['cash', 'card', 'wechat', 'alipay'],
  allowReturn: true,
  returnDays: 7,
  memberDiscount: true,
  pointsRatio: 10,
  pointsValue: 1,
  printReceipt: true,
  printCopies: 2
})

// 权限设置
const permissionSettings = reactive({
  discountAuth: 'manager',
  maxDiscount: 85,
  returnAuth: 'manager',
  transferAuth: 'manager',
  reportAuth: ['sales', 'inventory']
})

// 通知设置
const notificationSettings = reactive({
  stockWarning: true,
  warningMethods: ['sms', 'system'],
  dailyReport: true,
  reportTime: '18:00',
  receivers: ['manager', 'regional']
})

// 门店变更
const handleStoreChange = () => {
  ElMessage.success('切换门店成功，正在加载设置')
  // 这里可以根据门店ID加载对应的设置
}

// 保存设置
const handleSave = () => {
  console.log('保存设置:', {
    basicSettings,
    inventorySettings,
    salesSettings,
    permissionSettings,
    notificationSettings
  })
  ElMessage.success('设置保存成功')
}
</script>

<style scoped>
.store-settings {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.store-selector {
  margin-bottom: 20px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}
</style>

